<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端分享1——动态按钮特效</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <h1 class="title">十八个酷炫的按钮动画效果</h1>
    <p>鼠标hover之后各种按钮动画特效，包括背景动画、边框动画、按钮翻转等动画特效，尽情体验！</p>
    <div class="frame">
        <button class="custom-btn btn-1">查看更多</button>
        <button class="custom-btn btn-2">查看更多</button>
        <button class="custom-btn btn-3"><span>查看更多</span></button>
        <button class="custom-btn btn-4"><span>查看更多</span></button>
        <button class="custom-btn btn-5"><span>查看更多</span></button>
        <button class="custom-btn btn-6"><span>查看更多</span></button>
        <button class="custom-btn btn-7"><span>查看更多</span></button>
        <button class="custom-btn btn-8"><span>查看更多</span></button>
        <button class="custom-btn btn-9">查看更多</button>
        <button class="custom-btn btn-10">查看更多</button>
        <button class="custom-btn btn-11">查看更多<div class="dot"></div></button>
        <button class="custom-btn btn-12"><span>点我！</span><span>查看更多</span></button>
        <button class="custom-btn btn-13">查看更多</button>
        <button class="custom-btn btn-14">查看更多</button>
        <button class="custom-btn btn-15">查看更多</button>
        <button class="custom-btn btn-16">查看更多</button>
        <button class="custom-btn btn-17">查看更多</button>
        <button class="custom-btn btn-18"><span>查看更多</span></button>
    </div>
</body>

</html>